<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../plugins/echarts/echarts.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6B6oV405jFfGnFdkXMmoBGkmcf3TBzPD"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">


    <style>

        .BMap_cpyCtrl
        {
            display:none;
        }
        .anchorBL{
            display:none;
        }
        .tangram-suggestion-main {
            z-index: 999999;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .datatable {
            position: relative;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: rgb(96, 98, 102);
            overflow: hidden;
            flex: 1 1 0%;
        }
        .datatable td, .datatable th {
            padding: 12px 0;
            min-width: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>体检机构管理<small>体检机构管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>体检机构管理</el-breadcrumb-item>
            <el-breadcrumb-item>体检机构管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input placeholder="体检机构名" v-model="pagination.queryString" style="width: 200px;" class="filter-item"
                          @keyup.enter.native="handleFilter"></el-input>
                <el-button @click="handleCurrentChange(1)" class="dalfBut">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                <el-button type="warning" class="butT" @click="ExportPDF()">PDF导出</el-button>
                <el-button class="butT" type="info" @click="dialogEchartsVisible = true">预约占比</el-button>
            </div>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row
                      @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="name" label="体检机构名" align="center"></el-table-column>
                <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
                <el-table-column prop="lng" label="经度" align="center"></el-table-column>
                <el-table-column prop="lat" label="纬度" align="center"></el-table-column>
                <el-table-column prop="img" label="机构图片" align="center">
                    <template   slot-scope="scope">
                        <img :src="'http://qgc8uox2k.hd-bkt.clouddn.com/'+scope.row.img" min-width="70" height="70">
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="详细地址" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
            <!-- 新增标签弹层 -->
            <div class="add-form">
                <el-dialog title="新增体检机构地址" :visible.sync="dialogFormVisible">
                    <template>
                        <el-tabs v-model="activeName" type="card">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form label-position="right" label-width="100px" :rules="rules" ref="dataAddForm" :model="formData">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="体检机构名" prop="name">
                                                <el-input v-model="formData.name"/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="联系电话">
                                                <el-input v-model="formData.phone"/>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="24">
                                            <el-form-item label="上传图片">
                                                <el-upload
                                                        class="avatar-uploader"
                                                        action="/address/upload.do"
                                                        :auto-upload="autoUpload"
                                                        name="imgFile"
                                                        :show-file-list="false"
                                                        :on-success="handleAvatarSuccess"
                                                        :before-upload="beforeAvatarUpload">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                </el-upload>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="经度">
                                                <el-input    id="lng" value="" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="纬度">
                                                <el-input    id="lat" value=""  />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <div id="r-result4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                详细地址
                                                <input type="text" id="suggestId" size="20" value=""
                                                       style="width:150px;height:30px; border: 1px solid #ccc;border-radius: 3px"/>
                                            </div>
                                        </el-col>
                                        <el-button type="primary" icon="el-icon-location" @click="openMap()" round>设置定位</el-button>
                                    </el-row>
                                    <el-row v-show="visitable" :span="24" >
                                        <div id="allmap" style="width:400px;height:300px;"></div>
                                        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;display:none;"></div>
                                    </el-row>
                                </el-form>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="addCancel()">取消</el-button>
                        <el-button type="primary" @click="handleAdd()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- 编辑标签弹层 -->
            <div class="add-form">
                <el-dialog title="编辑检查组" :visible.sync="dialogFormVisible4Edit" >
                    <template>
                        <el-tabs v-model="activeName" type="card">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form label-position="right" label-width="100px" :rules="rules" ref="dataEditForm" :model="editFormData" >
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="体检机构名" prop="name">
                                                <el-input v-model="editFormData.name"/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="联系电话">
                                                <el-input v-model="editFormData.phone"/>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="24">
                                            <el-form-item label="上传图片">
                                                <el-upload
                                                        class="avatar-uploader"
                                                        action="/address/upload.do"
                                                        :auto-upload="autoUpload"
                                                        name="imgFile"
                                                        :show-file-list="false"
                                                        :on-success="handleAvatarSuccess"
                                                        :before-upload="beforeAvatarUpload">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                </el-upload>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="经度">
                                                <el-input   id="lng1" value="" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-form-item label="纬度">
                                                <el-input  id="lat1" value=""  />
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span="12">
                                                <div id="r-result">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                    详细地址
                                                      <input type="text" id="suggestId1" size="20" value=""
                                                        style="width:150px;height:30px; border: 1px solid #ccc;border-radius: 3px"/>
                                            </div>
                                        </el-col>
                                        <el-button type="primary" icon="el-icon-location" @click="openMap1()" round>设置定位</el-button>
                                    </el-row>
                                    <el-row v-show="visitable" :span="24" >
                                        <div id="allmap1" style="width:400px;height:300px;"></div>
                                        <div id="searchResultPanel1" style="border:1px solid #C0C0C0;width:150px;height:auto;display:none;"></div>
                                    </el-row>
                                </el-form>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
                    </div>
                </el-dialog>
            </div>
            <!--体检机构分布-->
            <el-dialog
                    title="体检机构分布"
                    :visible.sync="dialogEchartsVisible"
                    width="60%"
                    @opened="drawEcharts"
            >
                <div id="chart1" style="height:500px;"></div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogEchartsVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogEchartsVisible = false">确 定</el-button>
                </span>
            </el-dialog>

        </div>
    </div>
</div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
            autoUpload:true,//自动上传
            imageUrl:null,//模型数据,用于上传图片完成后图片预览
            activeName:'first',//添加/编辑窗口Tab标签名称
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize:10,
                total:100,
                queryString:null,
            },

            dataList: [],//列表数据
            formData: {},//表单数据
            tableData:[],//新增和编辑表单中对应的检查项列表数据
            editFormData:{},//编辑表单的数据
            multipleSelection: [], //选中的复选框
            checkitemIds:[],//新增和编辑表单中检查项对应的复选框，基于双向绑定可以进行回显和数据提交
            dialogFormVisible: false,//控制添加窗口显示/隐藏
            dialogFormVisible4Edit:false,//控制编辑窗口显示/隐藏
            dialogEchartsVisible: false,//图表表单是否可见
            visitable:false,
            lng: null,
            lat: null,
            address:null,
            myChartData:[],
            data:[],
            geoCoordMap:{
                '合肥市':[117.27,31.86],
                '南京市':[118.78,32.04],
                '扬州市':[119.42,32.39],
				'上海市':[121.48,31.22],
                '北京市':[116.41667,39.91667],
                '广州市':[113.23333,23.16667],
                '杭州市':[120.20000,30.26667],
                '深圳市':[114.06667,22.61667],
                '成都市':[104.06667,30.66667],
            },
            rules: {//校验规则
                name: [{required: true, message: '项目编码为必填项', trigger: 'blur'}]
            }
        },
        created() {
            this.findPage();
        },

        methods: {

            openMap1(){
                this.visitable=true
                var map = new BMap.Map("allmap1");    // 创建Map实例
                var geoc = new BMap.Geocoder();
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
                //添加地图类型控件
                map.addControl(new BMap.MapTypeControl({
                    mapTypes:[
                        BMAP_NORMAL_MAP,
                        BMAP_HYBRID_MAP
                    ]}));
                map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
                map.enableScrollWheelZoom(true);

                // 百度地图API功能
                function G(id) {
                    return document.getElementById(id);
                }

                var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                    {"input" : "suggestId1"
                        ,"location" : map
                    });

                ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
                    var str = "";
                    var _value = e.fromitem.value;
                    var value = "";
                    if (e.fromitem.index > -1) {
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                    value = "";
                    if (e.toitem.index > -1) {
                        _value = e.toitem.value;
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                    G("searchResultPanel1").innerHTML = str;
                });

                var myValue;
                ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                    var _value = e.item.value;
                    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    G("searchResultPanel1").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                    setPlace();
                });

                function setPlace(){
                    map.clearOverlays();    //清除地图上所有覆盖物
                    function myFun(){
                        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                        map.centerAndZoom(pp, 18);
                        map.addOverlay(new BMap.Marker(pp));    //添加标注
                    }
                    var local = new BMap.LocalSearch(map, { //智能搜索
                        onSearchComplete: myFun
                    });
                    local.search(myValue);
                }
                map.addEventListener("click",(e) =>{
                    var pt = e.point;
                    this.editFormData.lng = pt.lng;
                    this.editFormData.lat = pt.lat;
                    document.getElementById('lng1').value = pt.lng;
                    document.getElementById('lat1').value = pt.lat;
                    geoc.getLocation(pt,(rs) =>{
                        var addComp = rs.addressComponents;
                        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                        this.editFormData.city = addComp.city;
                        this.editFormData.address = address;
                        document.getElementById('suggestId1').value = address;
                    });
                });
            },
            openMap(){
              this.visitable=true
                var map = new BMap.Map("allmap");    // 创建Map实例
                var geoc = new BMap.Geocoder(); //地址解析对象
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
                //添加地图类型控件
                map.addControl(new BMap.MapTypeControl({
                    mapTypes:[
                        BMAP_NORMAL_MAP,
                        BMAP_HYBRID_MAP
                    ]}));
                map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
                map.enableScrollWheelZoom(true);

                // 百度地图API功能
                function G(id) {
                    return document.getElementById(id);
                }

                var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                    {"input" : "suggestId"
                        ,"location" : map
                    });

                ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
                    var str = "";
                    var _value = e.fromitem.value;
                    var value = "";
                    if (e.fromitem.index > -1) {
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                    value = "";
                    if (e.toitem.index > -1) {
                        _value = e.toitem.value;
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                    G("searchResultPanel").innerHTML = str;
                });

                var myValue;
                ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                    var _value = e.item.value;
                    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                    setPlace();
                });

                function setPlace(){
                    map.clearOverlays();    //清除地图上所有覆盖物
                    function myFun(){
                        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                        map.centerAndZoom(pp, 18);
                        map.addOverlay(new BMap.Marker(pp));    //添加标注
                    }
                    var local = new BMap.LocalSearch(map, { //智能搜索
                        onSearchComplete: myFun
                    });
                    local.search(myValue);
                }
                map.addEventListener("click",(e) =>{
                    var pt = e.point;
                    this.formData.lng = pt.lng;
                    this.formData.lat = pt.lat;
                    document.getElementById('lng').value = pt.lng;
                    document.getElementById('lat').value = pt.lat;
                    geoc.getLocation(pt,(rs) =>{
                        var addComp = rs.addressComponents;
                        var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                        this.formData.city = addComp.city;
                        this.formData.address = address;
                        document.getElementById('suggestId').value = address;
                    });
                });
            },

            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response, file) { //http 200
                this.imageUrl = "http://qgc8uox2k.hd-bkt.clouddn.com/" + response.data;
                this.$message({
                    type: response.flag ? 'success' : 'error',
                    message: response.message
                });
                //设置模型数据（图片名称），后续提交ajax请求时会提交到后台最终保存到数据库
                this.formData.img = response.data;
                this.editFormData.img = response.data;
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //取消表单校验
            addCancel(){
                this.dialogFormVisible = false;
                this.$refs['dataAddForm'].clearValidate();
            },
            //编辑
            handleEdit() {
                this.$refs['dataEditForm'].validate((valid) => {
                    if (valid) {
                        //发送ajax请求，将修改后的表单数据（检查组基本信息、勾选的检查项）提交到后台进行处理
                        axios.post("/address/edit.do", this.editFormData).then((res) => {
                            //关闭编辑窗口
                            this.dialogFormVisible4Edit = false;
                            if (res.data.flag) {
                                //操作成功
                                this.$message.success(res.data.message);
                            } else {
                                //操作失败
                                this.$message.error(res.data.message);
                            }
                        }).finally(() => {
                            this.findPage();
                        });
                    }
                })
            },
            //添加
            handleAdd() {
                this.$refs['dataAddForm'].validate((valid) => {
                    if (valid) {
                        //发送ajax请求，将表单数据提交到后台进行处理
                        axios.post("/address/add.do", this.formData).then((res) => {
                            //关闭新增窗口
                            this.dialogFormVisible = false;
                            if (res.data.flag) {
                                //操作成功
                                this.$message.success(res.data.message);
                            } else {
                                //操作失败
                                this.$message.error(res.data.message);
                            }
                        }).finally(() => {
                            //重新进行分页查询
                            this.findPage();
                        });
                    }
                })
            },
            //分页查询
            findPage() {
                //封装分页参数
                var param = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                };
                //发送ajax请求，提交分页相关参数
                axios.post("/address/findPage.do", param).then((res) => {
                    //为VUE对象的模型数据赋值，基于双向数据绑定展示到页面
                    this.dataList = res.data.rows;//当前页展示的数据集合
                    this.pagination.total = res.data.total;//总数据量
                });
            },
            // 重置表单
            resetForm() {
                this.formData = {};
                this.imageUrl = null;
                this.editFormData = {};
                document.getElementById('lng').value ='';
                document.getElementById('lat').value ='';
                document.getElementById('suggestId').value ='';
            },
            // 弹出添加窗口
            handleCreate() {
                this.dialogFormVisible = true;
                this.resetForm();
                this.visitable=false;
                this.checkitemIds = [];
                //发送ajax请求,查询所有检查项信息,转为json,赋值给tabledata
                axios.post("/address/findAll.do").then((res) => {
                    if (res.data.flag) {
                        this.tableData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            },
            // 弹出编辑窗口
            handleUpdate(row) {
                this.dialogFormVisible4Edit = true;
                this.visitable=false;
                axios.get("/address/findById.do?id=" + row.id).then((res) => {
                    if (res.data.flag) {
                        document.getElementById('lng1').value =res.data.data.lng;
                        document.getElementById('lat1').value =res.data.data.lat;
                        document.getElementById('suggestId1').value =res.data.data.address;
                        this.editFormData = res.data.data;
                        this.imageUrl = "http://qgc8uox2k.hd-bkt.clouddn.com/" + res.data.data.img;
                        this.editFormData.img = res.data.data.img;
                    } else {
                        res.$message.error(res.data.message);
                    }
                });
            },
            //多选
            handleSelectionChange(val) {
                this.multipleSelection = [];
                for (let i = 0; i < val.length; i++) {
                    this.multipleSelection.push(val[i].id)
                }
            },
            //导出PDF
            ExportPDF() {
                if (this.multipleSelection.length > 0) {
                    window.location.href = '/address/exportAddressPDF.do?ids=' + this.multipleSelection;
                } else {
                    this.$message.error("请先选择需要打印的机构!")
                }
            },
            //切换页码
            handleCurrentChange(currentPage) {
                //为模型数据赋值（当前页面）
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
            //删除
            handleDelete(row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/address/delete.do?id="+row.id).then((res)=>{
                        if(res.data.flag) {
                            this.$message({
                                message:res.data.message,
                                type:'success'
                            });
                            this.findPage();
                        }else {
                            this.$message.error(res.data.message);
                        }
                    }).catch((res)=>{ //axios对象请求的catch， 网络请求不是2xx
                        this.showMessage(res);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //echarts显示
            convertData (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = this.geoCoordMap[data[i].city];
                    if (geoCoord) {
                        res.push({
                            name: data[i].city,
                            value: geoCoord.concat(data[i].count)
                        });
                    }
                }
                return res;
            },

            //展现权限信息
            showMessage(res) {
                if (res = 'Error: Request failed with status code 403') {
                    //权限不足
                    this.$message.error("无访问权限");
                } else {
                    this.$message.error("未知错误");
                    return;
                }
            },
            //展示echarts

            drawEcharts() {
                var myChart1 = echarts.init(document.getElementById('chart1'));

                //发送ajax请求获取动态数据
                   axios.get("/address/getAddressEcharts.do").then((res) => {
                       this.data =res.data.data.data;
                         myChart1.setOption({
                        title: {
                            text: '合肥仁爱男科全国地址分布图',
                            left: 'center'
                        },
                        tooltip : {
                            trigger: 'item'
                        },
                        bmap: {
                            center: [104.114129, 37.550339],
                            zoom: 5,
                            roam: true,
                            mapStyle: {
                                styleJson: [{
                                    'featureType': 'water',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#d1d1d1'
                                    }
                                }, {
                                    'featureType': 'land',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#f3f3f3'
                                    }
                                }, {
                                    'featureType': 'railway',
                                    'elementType': 'all',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'highway',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#fdfdfd'
                                    }
                                }, {
                                    'featureType': 'highway',
                                    'elementType': 'labels',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'arterial',
                                    'elementType': 'geometry',
                                    'stylers': {
                                        'color': '#fefefe'
                                    }
                                }, {
                                    'featureType': 'arterial',
                                    'elementType': 'geometry.fill',
                                    'stylers': {
                                        'color': '#fefefe'
                                    }
                                }, {
                                    'featureType': 'poi',
                                    'elementType': 'all',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'green',
                                    'elementType': 'all',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'subway',
                                    'elementType': 'all',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'manmade',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#d1d1d1'
                                    }
                                }, {
                                    'featureType': 'local',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#d1d1d1'
                                    }
                                }, {
                                    'featureType': 'arterial',
                                    'elementType': 'labels',
                                    'stylers': {
                                        'visibility': 'off'
                                    }
                                }, {
                                    'featureType': 'boundary',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#fefefe'
                                    }
                                }, {
                                    'featureType': 'building',
                                    'elementType': 'all',
                                    'stylers': {
                                        'color': '#d1d1d1'
                                    }
                                }, {
                                    'featureType': 'label',
                                    'elementType': 'labels.text.fill',
                                    'stylers': {
                                        'color': '#999999'
                                    }
                                }]
                            }
                        },
                        series : [
                            {
                                name: '数量',
                                type: 'scatter',
                                coordinateSystem: 'bmap',
                                data: this.convertData(this.data),
                                symbolSize: function (val) {
                                    return val[2]*5;
                                },
                                encode: {
                                    value: 2
                                },
                                label: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: false
                                },
                                itemStyle: {
                                    color: 'purple'
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            {
                                name: 'Top 5',
                                type: 'effectScatter',
                                coordinateSystem: 'bmap',
                                data: this.convertData(this.data.sort(function (a, b) {
                                    return b.value - a.value;
                                }).slice(0, 6)),
                                symbolSize: function (val) {
                                    return val[2]*5;
                                },
                                encode: {
                                    value: 2
                                },
                                showEffectOn: 'render',
                                rippleEffect: {
                                    brushType: 'stroke'
                                },
                                hoverAnimation: true,
                                label: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                },
                                itemStyle: {
                                    color: 'purple',
                                    shadowBlur: 20,
                                    shadowColor: '#333'
                                },
                                zlevel: 1
                            }
                        ]
                    });
                });
            },
        }
    })
</script>

</html>
